import React, { Component } from 'react';
import {Redirect, Route, Switch} from 'react-router-dom';


import StorageUtil from '../util/StorageUtil'


import { Layout, Menu, Breadcrumb, Icon } from 'antd';


import './less/app.less';

import NoMatch from './404';

import SiderMenu from "./appd/SiderMenu";
import MainIndex from './appd/MainIndex'
import UserManeger from './appd/UserManeger'
import HeaderApp from './appd/HeaderApp'

const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;




class App extends Component {

  constructor(props) {
    super(props);

    this.setState({ jwtobj: StorageUtil.getJwtObj });
  }

  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }


  render() {
    if (!StorageUtil.isLogin()) {
      return <Redirect to="/login" />;
    }

    // const {name} = this.state.jwtobj;
    const name = "yi";

    return (
      <Layout>
        <SiderMenu collapsed={this.state.collapsed} />

        <Layout>
          {/* <Header style={{ background: '#fff', padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          </Header> */}

            <HeaderApp toggle={this.toggle} username={name}/>
          {/* <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
            Content
              </Content> */}

          <Content style={{ margin: '8px', padding: '16px', background: '#fff', minHeight: 280 }}>
     
            <Switch> 
              <Route exact path={'/app'} component={MainIndex} />
              <Route exact path={'/app/user'} component={UserManeger} />
              {/* <Route exact path={'/app/header/Calendars'} component={Calendars} />
              <Route exact path={'/app/chart/echarts'} component={Echarts} />
              <Route exact path={'/app/richText'} component={RichText} />
              <Route exact path={'/app/upload'} component={UploadEditor} />  */}
              <Route component={NoMatch} />
            </Switch>
          </Content>

        </Layout>
      </Layout>
    )

    // <Layout className="ant-layout-has-sider" style={{height: '100%'}}>
    //         <SiderCustom collapsed={collapsed} path={location.pathname}/>
    //         <Layout>
    //             <HeaderCustom collapsed={collapsed} toggle={this.toggle} username={name}/>
    //             <Content style={{margin: '0 16px'}}>
    //                 <Switch>
    //                     <Route exact path={'/app'} component={MIndex} />
    //                     <Route exact path={'/app/form'} component={UForm} />
    //                     <Route exact path={'/app/header/Calendars'} component={Calendars} />
    //                     <Route exact path={'/app/chart/echarts'} component={Echarts} />
    //                     <Route exact path={'/app/richText'} component={RichText} />
    //                     <Route exact path={'/app/upload'} component={UploadEditor} />
    //                     <Route component={noMatch} />
    //                 </Switch>
    //             </Content>
    //             <Footer style={{textAlign: 'center'}}>
    //                 MSPA ©2017-2018 Created by zysoft
    //             </Footer>
    //         </Layout>
    //     </Layout>


  }



}


export default App;